<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello vue</title>
</head>
<body>
    <div id="app">
        <!-- <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2> -->
        <h2 :style="{fontSize: '50px'}">{{message}}</h2>

        <h2 :style="{fontSize: finalSize + 'px', color: finalColor}">{{message}}</h2>
        <h2 :style="getStyles()">{{message}}</h2>
        <button :style="ddd()" @click="aaa()">输出一个数</button>
        <button @click="bbb">去掉函数</button>
        <button @click="ccc">绑定函数</button>
        <button @click="aaa()">总是输出一个数</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        
        const app = new Vue({
            el: '#app',    
            data: {    
                message: '你好啊',
                finalSize: 100,
                finalColor: 'red',
                s1: "",
                i: 0
            },
            methods: {
                getStyles: function () {
                    return {fontSize: this.finalSize + 'px', color: this.finalColor}
                },
                aaa: function () {
                    console.log(++this.i);
                },
                bbb() {
                    this.s1 = "pointer-events: none";
                },
                ccc() {
                    this.s1 = "";
                },
                ddd() {
                    return this.s1;
                }

            }
        })
    </script>
</body>
</html>